<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>测试聊天系统</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
</head>
<style type="text/css">
    *{
        padding: 0px;
        margin:0px;
    }
    td{
        border:1px solid #cccccc;
    }
    li{
        list-style-type: none;
        margin:0 5px;
    }
    span{
        width:100%;
        height: 50px;
        line-height: 50px;
        display: inline-block;
        border-bottom:1px solid #0a6aa1;
    }
</style>
<body>
<div style="padding: 0 5%">
    <table style="border:1px solid #cccccc;width: 100% ;height: 500px">
        <tr>
            <td colspan="2" height="50"><h1 align="center">聊 天 室</h1></td>
        </tr>
        <tr>
            <td width="100px">
                <span onclick="window.location.href='__MODULE__/TalkMsg/index'">社区聊天</span>
                <volist name="member" id="vo">
                    <span onclick="window.location.href='__MODULE__/TalkMsg/index/to_uid/{$key}'" style="padding-bottom: 10px"><img src="{$vo.avatar}" alt="" width="50">{$vo.nickname}</span>
                </volist>
            </td>
            <td align="center">
                <div style="height: 60%;background-color:#ffffe5">
                    <ul class="content">

                    </ul>
                </div>
                <textarea name="content" required id="" style="border:1px solid #cccccc;width: 95%;height: 130px;" cols="30" rows="10"></textarea>
                <input type="button" value="发送" style="float: right" onclick="sendMsg()">
            </td>
        </tr>
    </table>
    <ul id="message"> </ul>
</div>



</body>
<script type="text/javascript" src="__PUBLIC__/Wx/js/jquery-1.9.1.js"></script>

<script language="javascript" type="text/javascript">
    function sendMsg() {
        var content = $("textarea[name='content']").val();
        if(content){
            // 清空输入框的消息
            $("textarea[name='content']").val('');
            var from_uid = "{$uid}";
            if("{$to_uid}"){
                var to_msg = "<li align='right'>" + from_uid + ' 说：' + content + '</li>';
                $(".content").append(to_msg);
                var to_uid = "{$to_uid}";
                $.post('/Talk/TalkMsg/toUser/',{content:content,to_uid:to_uid})
            }else{
                var to_group = "{$to_group}";
                $.post('/Talk/TalkMsg/toGroup/',{content:content,to_group:to_group})
            }
        }

    }
</script>

<script language="javascript" type="text/javascript">
    /*
     与GatewayWorker建立websocket连接，域名和端口改为你实际的域名端口，
     其中端口为Gateway端口，即start_gateway.php指定的端口。
     start_gateway.php 中需要指定websocket协议，像这样
     $gateway = new Gateway(websocket://0.0.0.0:7272);
    */
    var ws = new WebSocket("ws://www.xiangtws.com:8686");
    // 服务端主动推送消息时会触发这里的onmessage
    ws.onmessage = function(e){
        var data = JSON.parse(e.data);
        console.log(data);
        if (data.client_id!= 0 && data.type=='init') {
            $.post('/Talk/TalkBind/userBind/', {client_id: data.client_id}, function(data){}, 'json');
        }
        if (data.from_uid > 0) {
            if("{$uid}" == data.from_uid){
                var t_msg = "<li align='right'>" + data.from_uid + ' 说：' + data.msg + '</li>';
            }else{
                var t_msg = "<li align='left'>" + data.from_uid + ' 说：' + data.msg + '</li>';
            }

            $(".content").append(t_msg);
        }
    };
</script>
</html>